import { connect } from 'react-redux';
import { Button } from 'antd';
import * as Actions from '../redux/Actions'

const Header = (props: any) => {
  const save = () => {
    localStorage.setItem('data', JSON.stringify(props.itemsInEditing))
  }

  const load = () => {
    const data: any = localStorage.getItem('data')
    props.insertItemsVal(JSON.parse(data))
  }

  return <div className="header">
    <Button onClick={load} style={{ marginRight: '20px' }}>读取</Button>
    <Button onClick={save} type="primary">保存</Button>
  </div >
}

function mapStateToProps(state: any, ownProps: any) {
  return {
    itemsInEditing: state.itemsInEditing
  }
}

function mapDispatchToProps(dispatch: any, ownProps: any) {
  return {
    insertItemsVal: (data: any) => {
      dispatch(Actions.insertItemsVal(data))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header)